<template>
<div class="products">
    <div v-for="(product,index) in items" :key="index" class="product3">
      <img :src="product.imgInfosBOs[0].imgUrl" alt="Product image" class="product-image">
      <div class="product-details">
        <div class="product-title">标题：{{product.title}}</div>
        <div class="product-price">价格：{{ product.price }}</div>
        <!-- <div class="product-price">价格：{{ product.status }}</div> -->
        <Button type="warning" @click="DripProduct(index)">{{ product.status == 1 ? '下架' : '已下架' }}</Button>
      </div>
    </div>
  </div>
  </template>

  <script>
  import axios from 'axios';
  export default {
    data() {
      return {
        isDroped:true,
        loading: true,
        user:[],
        items: [],
        products:[],
      };
    },
    mounted() {
    const savedUser = localStorage.getItem("user");
    console.log(localStorage.getItem("user"));
    if (savedUser) {
      this.user = JSON.parse(savedUser);
      console.log(111111111111111,this.user);
    }
      // 在组件挂载后立即调用API
      this.fetchItems();
    },
    methods: {
      DripProduct(index){
        console.log(index);
        this.items[index].status = 2
        axios
          .post(
            "http://localhost:8081/salvage/products/updateStatus",
        {
          productId:this.items[index].productId,
          status:this.items[index].status = 2
        }
        ).then((res)=>{
          if(res.data.code == '00000'){
console.log('111');
          }
        })
      },
      fetchItems() {
        // 假设API地址为/api/items
        axios
          .post(
            "http://localhost:8081/salvage/students/getStudentAndProdById",
            {
                studentId:this.user.studentId
            }
          ).then((response) => {
          this.loading = false;
          this.items = response.data.data.products;
          console.log(this.items);
        }).catch((error) => {
          console.error(error);
          this.loading = false;
        });
      },
    },
  };
  </script>
<style scoped>
.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 20px;
}

.product3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.product-image {
  width: 100%;
  height: auto;
}

.product-details {
  margin-top: 10px;
  text-align: center;
}

.product-title {
  font-size: 1.2rem;
  font-weight: bold;
}

.product-price {
  font-size: 1rem;
  color: green;
  margin-top: 5px;
}
</style>
  